<template>
  <div class="container">
    <div class="echartsFirst">
      <MyEchart :option="optionSecond"></MyEchart>
    </div>
    <el-row>
      <!-- 左上地区 -->
      <el-col :span="12">
        <div class="grid-content">
          <MyEchart :option="optionPlace" :path="pathArr[0]"></MyEchart>
        </div>
      </el-col>
      <!-- 右上学历 -->
      <el-col :span="12">
        <div class="grid-content" path="">
          <MyEchart :option="optionEducation"></MyEchart>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <!-- 左下岗位 -->
      <el-col :span="12" path="">
        <div class="grid-content">
          <MyEchart :option="optionPost"></MyEchart>
        </div>
      </el-col>
      <!-- 右下状态 -->
      <el-col :span="12">
        <div class="grid-content" path="">
          <MyEchart :option="optionState"></MyEchart>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { optionFirst,optionPost,optionState,optionEducation,optionPlace,optionSecond} from "../echartOption/option1";

export default {
  name: "EmployeeChart",
  data() {
    return {
      optionFirst,
      optionPost,
      optionState,
      optionEducation,
      optionPlace,
      optionSecond,
      pathArr:[
        '/api/empRosterInfo/getCountByEmpDqName',
        '/empRosterInfo/getCountByEmpDegree',
        '/empRosterInfo/getCountByEmpJob',
        '/empRosterInfo/getCountByEmpType'
      ]
    };
  },
  methods: {
    // getPost(){
    //   console.log(fetchGet(this.pathArr[2])); 
    // },
    // getState(){
    
    // },
    // getEducation(){

    // },
    // getPlace(){

    // }
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;
  .el-row{
    height: 50%;
    .el-col{
      height: 100%;
      // background-color: plum;
      .grid-content{
        // background-color:palevioletred;
        box-sizing: border-box;
        height: 90%;
        margin: 20px;
        border:2px solid #c1e5fa;
        padding: 10px;
        border-radius: 20px;
      }
    }
  }
}
.echartsFirst {
  background-color: white;
  // background-color: palevioletred;
  width: 500px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  // background-color: cadetblue;
  z-index: 5;
}
</style>
